revision:
The property sets or returns the HTML element, including attributes, start tag, and end tag.
Syntax:
element.outerHTML : returns the outerHTML property: the HTML content of the element, including attributes, start tag and end tag..
element.outerHTML = text : sets the outerHTML property:
property value:
text : the new HTML content.
example
Click "change" to change the first h4 header to a h5.
<div>
<p>Click "change" to change the first h4 header to a h5.</p>
<button onclick="firstFunction()">Change</button>
<h4>The outerHTML Property</h4>
</div>
<script>
function firstFunction() {
const element = document.getElementsByTagName("h4")[0];
element.outerHTML = "<h5>You changed me and my content!</h5>";
}
</script>
Click "Alert" to alert the outer HTML content of the ul element.
<div>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p>Click "Alert" to alert the outer HTML content of the ul element.</p>
<button onclick="secondFunction()">Alert</button>
</div>
<script>
function secondFunction() {
let html = document.getElementById("myList").outerHTML;
alert(html);
}
</script>